<template>
	<view class="wrap">
		<u-form class="u-p-b-40"  :model="model" :rules="rules" ref="pwdForm" :errorType="errorType">
			<u-form-item label-position="top" label="旧密码" prop="oldPassword">
				<u-input :password-icon="true" type="password" v-model="model.oldPassword" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item label-position="top" label="新密码" prop="newPassword">
				<u-input :password-icon="true" type="password" v-model="model.newPassword" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item label-position="top" label="确认密码" label-width="150" prop="rePassword">
				<u-input type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {},
				rules: {
					oldPassword: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						}
					],
					newPassword: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change','blur'],
						}
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.newPassword;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					]
				},
				errorType: ['message']
			};
		},
		onReady() {
			this.$refs.pwdForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.pwdForm.validate(valid => {
					console.log(valid);
					if (valid) {
						uni.showLoading()
						this.$u.api.updatePwd(this.model).then(res => {
							this.$dm.showSuccess("修改成功，请重新登录")
							setTimeout(() => {
								uni.reLaunch({
									url: '../my/login'
								});
							}, 1500)
						})
					}
				});
			}
		}
	};
</script>

<style>
	.wrap {
		padding: 30rpx;
	}
	
	/* 全局样式 */
	.changePwd {
		background-color: #f7f7f7;
		height: 100vh;
	}

	.changePwd .changePwd-list:nth-child(2) {
		margin-top: 20rpx;
	}

	.changePwd .changePwd-list:nth-child(3) {
		margin-top: 3rpx;
		border-bottom: 3rpx solid #f7f7f7;
	}

	/* 列表样式 */
	.changePwd-list {
		display: flex;
		height: 70rpx;
		padding-top: 10rpx;
		box-sizing: border-box;
		font-size: 16px;
		background-color: #ffffff;
	}

	.changePwd-list .xing {
		color: #ff0000;
		margin-right: 10rpx;
		margin-left: 20rpx;
	}

	.changePwd-list input {
		margin-left: 20rpx;
	}

	.changePwd-bottom {
		/* width: 700rpx; */
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #ffffff;
	}

	.changePwd-bottom button {
		width: 700rpx;
		background-color: #05ac9d;
		color: #ffffff;
	}
</style>
